<template>
  <div>
    <div class="format-selector">
      <div>组件</div>
    </div>
    <div class="format-list">
      <div v-for="(item, index) in checkboxes" :key="index">
        <input
          type="checkbox"
          :id="item.id"
          :value="item.text"
          v-model="item.checked"
          @change="handleCheckChange(item)"
        />
        <label :for="item.id">{{ item.text }}</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxes: [
        { id: "legend", text: "图例", checked: false },
        { id: "gridline", text: "网格线", checked: false },
        { id: "Axis", text: "轴线", checked: true },
      ],
    };
  },
  methods: {
    handleCheckChange(checkbox) {
      switch (checkbox.id) {
        case "legend":
          this.showLegend(checkbox.checked);
          break;
        case "gridline":
          this.showGridline(checkbox.checked);
          break;
        case "Axis":
          this.showXAxis(checkbox.checked);
          break;
        // ...其他选项
      }
    },
    showLegend(show) {
      this.$emit("chart-legend-showed", show);
    },
    showGridline(show) {
      this.$emit("chart-gridline-showed", show);
    },
    showXAxis(show) {
      this.$emit("chart-xAxis-showed", show);
    },
  },
};
</script>

<style>
  .format-selector {
    width: 200px;
  }

  .format-list {
    display: block;
  }

  .highlighted {
    /* 添加高亮显示的 CSS 样式 */
    font-weight: bold;
    background-color: deepskyblue;
  }
</style>